+  const [isPending, setIsPending] = useState(false);
+
-  const handleClick = () => {
-    toggleLike();
-    setIsPopping(true);
-    window.setTimeout(() => setIsPopping(false), 180);
+  const handleClick = async () => {
+    if (isPending) return;
+    setIsPending(true);
+    setIsPopping(true);
+    window.setTimeout(() => setIsPopping(false), 180);
+    try {
+      await toggleLike();
+    } finally {
+      setIsPending(false);
+    }
   };

-      disabled={loading}
+      disabled={loading || isPending}

-  useEffect(() => {
-    viewerIdRef.current = getOrCreateViewerId();
-  }, []);
-
   useEffect(() => {
     if (!postId) return;
+    
+    viewerIdRef.current = getOrCreateViewerId();

     const fetchLikeState = async () => {
-      const viewerId = viewerIdRef.current ?? getOrCreateViewerId();
+      const viewerId = viewerIdRef.current;
       if (!viewerId) {
         setLoading(false);
         return;
       }
       // ... rest of the code
     };

     void fetchLikeState();
   }, [postId]);

 useEffect(() => {
   if (!postId) return;
+  let isMounted = true;

   const fetchLikeState = async () => {
     const viewerId = viewerIdRef.current ?? getOrCreateViewerId();
     if (!viewerId) {
+      if (isMounted) setLoading(false);
-      setLoading(false);
       return;
     }

     const { data, count: total, error } = await supabase
       .from("post_likes")
       .select("viewer_id", { count: "exact" })
       .eq("post_id", postId);

+    if (!isMounted) return;
+
     if (error) {
       console.error("좋아요 조회 실패:", error);
       setLoading(false);
       return;
     }

     const rows = data ?? [];

     setCount(total ?? rows.length);
     setLiked(rows.some((row) => row.viewer_id === viewerId));
     setLoading(false);
   };

   void fetchLikeState();
+
+  return () => {
+    isMounted = false;
+  };
 }, [postId]);

 const toggleLike = async () => {
   const viewerId = viewerIdRef.current ?? getOrCreateViewerId();
   if (!viewerId) return;

+  // Optimistic update
+  const prevLiked = liked;
+  const prevCount = count;
+  
+  setLiked(!liked);
+  setCount((prev) => liked ? Math.max(0, prev - 1) : prev + 1);
+  setLoading(true);

   if (liked) {
     const { error } = await supabase
       .from("post_likes")
       .delete()
       .eq("post_id", postId)
       .eq("viewer_id", viewerId);

     if (error) {
       console.error("좋아요 취소 실패:", error);
+      // Rollback on failure
+      setLiked(prevLiked);
+      setCount(prevCount);
+      setLoading(false);
       return;
     }

-    setLiked(false);
-    setCount((prev) => Math.max(0, prev - 1));
+    setLoading(false);
     return;
   }

   const { error } = await supabase.from("post_likes").insert({
     post_id: postId,
     viewer_id: viewerId,
   });

   if (error) {
     if (isDuplicateKeyError(error)) {
       setLiked(true);
       await refreshCount();
     } else {
       console.error("좋아요 추가 실패:", error);
+      // Rollback on failure
+      setLiked(prevLiked);
+      setCount(prevCount);
     }
+    setLoading(false);
     return;
   }

-  setLiked(true);
-  setCount((prev) => prev + 1);
+  setLoading(false);
 };

 export function getOrCreateViewerId(): string | null {
   if (typeof window === "undefined") return null;
 
-  let id = window.localStorage.getItem(VIEWER_ID_KEY);
-
-  if (!id) {
-    if (window.crypto?.randomUUID) {
-      id = window.crypto.randomUUID();
-    } else {
-      id = `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+  try {
+    let id = window.localStorage.getItem(VIEWER_ID_KEY);
+
+    if (!id) {
+      if (window.crypto?.randomUUID) {
+        id = window.crypto.randomUUID();
+      } else {
+        id = `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+      }
+
+      window.localStorage.setItem(VIEWER_ID_KEY, id);
     }
 
-    window.localStorage.setItem(VIEWER_ID_KEY, id);
+    return id;
+  } catch {
+    // localStorage 접근 불가 시 (프라이빗 모드 등)
+    return null;
   }
-
-  return id;
 }